@import "reset";
@import "variable";

html {
  height: 100%;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

body, #container {
  height: 100%;
  width: 100%;
  font-size: 0.9em;
  color: #333333;
}

html, body {
  height: 100%;
  -webkit-overflow-scrolling: touch;

}

::-webkit-scrollbar {
  display: none;
}

.lineOption {
  content: '';
  position: absolute;
  background-color: $borderColor;
  margin: auto;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@mixin horizontalLine($top, $bottom, $width) {
  @extend .lineOption;
  transform: scaleY(.5);
  -webkit-transform: scaleY(.5);
  height: 1px;
  left: 0;
  right: 0;
  top: $top;
  bottom: $bottom;
  width: $width;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}

@mixin verticalLine($left, $right, $height) {
  @extend .lineOption;
  width: 1px;
  transform: scaleX(.5);
  -webkit-transform: scaleX(.5);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  top: 0;
  bottom: 0;
  left: $left;
  right: $right;
  height: $height;
}

